<template>
	<view class="all" :style="{'height':widHeight + 'px'}">
		<view class="theme">
			<uni-section class="username" title='主题' label="主题" type="line" titleFontSize="26px"></uni-section>
			<view class="all-color">
				<u-collapse accordion class="all-color-st">
					<u-collapse-item title="跟随系统" value=''>
						<view class="color-all">
							<view class="color-a" @click="bnt(false)"
								:style="{borderColor:active?'':`${borderColor1}`,backgroundColor:`${backgroundColor11}`}">
								<view class="color-b" :style="{backgroundColor:`${backgroundColor2}` }"></view>
								<view class="color-c" :style="{backgroundColor:`${backgroundColor3}` }"></view>
								<view class="color-q" :style="{backgroundColor:`${backgroundColor4}` }"></view>
								<view class="color-au" :style="{backgroundColor:`${backgroundColor5}` }"></view>
							</view>

							<view class="color-a" @click="bnt(true)"
								:style="{borderColor:active?`${borderColor2}`: '',backgroundColor:`${backgroundColor22}`}">
								<view class="color-b" :style="{backgroundColor:`${backgroundColor6}` }"></view>
								<view class="color-c" :style="{backgroundColor:`${backgroundColor7}` }"></view>
								<view class="color-q" :style="{backgroundColor:`${backgroundColor8}` }"></view>
								<view class="color-au" :style="{backgroundColor:`${backgroundColor9}` }"></view>
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>


			</view>
		</view>
		<view class="theme">
			<uni-section class="username" title='亮度' label="亮度" type="line" titleFontSize="26px"></uni-section>
			<view class="all-color1">
				<u-line-progress :percentage="percentage" />
				<view>

					<u-button @click="computedWidth('minus')" text="减少亮度" color='#f56c6c'></u-button>
					<u-button @click="computedWidth('plus')" text="增加亮度" color='#3c9cff'></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				widHeight: 0,

				active: false,
				value: '',
				borderColor1: 'red',
				backgroundColor11: '#fff',
				backgroundColor2: '#8799a3',
				backgroundColor3: '#aaaaaa',
				backgroundColor4: '#aaaaaa',
				backgroundColor5: '#afafaf',

				borderColor2: 'red',
				backgroundColor22: '#000',
				backgroundColor6: '#4e4e4e',
				backgroundColor7: '#4e4e4e',
				backgroundColor8: '#4e4e4e',
				backgroundColor9: '#959595',

				percentage: 50,
			};
		},
		onLoad() {
			this.active = this.themeSkincare
			
			uni.$setNavigationBarColor()
			const windowInfo = uni.getWindowInfo()
			this.widHeight = windowInfo.windowHeight //可使用窗口宽度
		},
		computed: {
			...mapState('setting', ["themeSkincare"]),
		},
		methods: {
			...mapMutations('setting', ['updataThemeSkincare']),

			bnt(bood) {
				this.active = bood
				if (this.active) {
					this.updataThemeSkincare(this.active)
					uni.$setNavigationBarColor()
				} else {
					this.updataThemeSkincare(this.active)
					uni.$setNavigationBarColor()
				}

			},
			computedWidth(type) {
				if (type === 'plus') {
					this.percentage = uni.$u.range(0, 100, this.percentage + 10)
				} else {
					this.percentage = uni.$u.range(0, 100, this.percentage - 10)
				}
				//屏幕亮度
				uni.setScreenBrightness({
					value: this.percentage / 100
				})
			}
		}
	}
</script>

<style lang="scss">
	.all {
		background-color: #f1f1f1;



		.theme {
			width: 90%;
			margin: 0 auto;

			.username {
				background-color: #f1f1f1;
			}

			.all-color {
				display: flex;

				flex-direction: column;
				justify-content: space-around;
				background-color: white;

				.color-all {
					display: flex;
					justify-content: space-around;

					.color-a {
						position: relative;
						width: 80px;
						height: 150px;
						border-radius: 10px;
						border: 3px solid;

						// border-color: #8799a3;

						display: flex;
						flex-direction: column;
						align-items: center;

						.color-b {
							width: 90%;
							// background-color: #8799a3;
							margin-bottom: 5px;
							margin-top: 10px;
							border-radius: 7px;
							height: 50px;
						}

						.color-c {
							width: 90%;
							// background-color: #aaaaaa;
							border-radius: 5px;
							height: 20px;
							margin-bottom: 7px;
						}

						.color-q {
							width: 90%;
							// background-color: #aaaaaa;
							border-radius: 5px;
							height: 20px;
						}

						.color-au {
							position: absolute;
							bottom: 3px;
							right: 0;
							left: 20%;
							width: 60%;
							// background-color: #aaaaaa;
							border-radius: 5px;
							height: 2px;

						}
					}

				}


			}

			.all-color1 {
				background-color: white;
				height: 150px;

				view {
					margin-top: 20px;
				}
			}
		}



	}
</style>